<template>
  <view class="container">
    <view style="height: 15px;"></view>
    <!-- =============字节跳动平台逻辑处理============= -->
    <view :hidden="onling||hideMyHint" class="about-item" style="font-size: small;">
      <view class="about-item_title">{{ paltform }}平台专栏</view>
      <view>因平台差异性,头条小程序和支付宝小程序对【rich-text】控件支持不太好,下方栏目的内容显示不出来,特在此模块简述一下。</view>
      <view class="hor-layout-center">
        <text>小程序原始地址</text>
        <img style="width:60px;height:60px;margin-left: 10px;"
             src="https://img-blog.csdnimg.cn/20200915112335397.png"></img>
      </view>
      <view class="hor-layout-center">
        <view>其他平台信息：
          <text style="font-size: smaller;color: #007AFF;">http://m3w.cn/__uni__9ac5bb8</text>
        </view>
      </view>
    </view>

    <block v-for="(item,index) in aboutList" :key="index">
      <view class="about-item">
        <view class="about-item_title">{{ item.title }}</view>
        <view style="width: 100%;height: 1px;border-bottom:gray dashed 1px ;margin:5px 0px;"></view>
        <rich-text class="about-item_text" :nodes="item.text" selectable="true"></rich-text>
        <view style="width: 100%;height: 1px;border-bottom:gray dashed 1px ;margin:5px 0px;"></view>
        <view class="hor-layout-center">
          <!-- #ifdef APP-PLUS -->
          <!-- =============APP平台逻辑处理============= -->
          <button v-if="item.miniId" class="button-view" @click="openMiniProgram(item.miniId)">打开小程序</button>
          <button v-if="item.weburl" class="button-view" @click="openWebView(item.weburl)">打开链接</button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <!-- =============H5平台逻辑处理============= -->
          <view v-if="item.h5tomini">
            <wx-open-launch-weapp id="launch-btn" :username="item.miniId">
              <script type="text/wxtag-template">
              <style>.wx-btn {
                display: inline-block;
                color: white;
                background-color: #007aff;
                position: relative;
                font-size: 13px;
                padding: 5px 8px;
                text-align: center;
                border-radius: 5px;
                overflow: hidden;
              }</style>
              <div class="wx-btn">H5跳转小程序</div>
              </script>
            </wx-open-launch-weapp>
          </view>
          <a v-if="!isWechatPlatform&&item.h5toapp" href="mToolBox://fromH5">
            <button class="button-view">个人工具箱APP</button>
          </a>
          <a v-if="!isWechatPlatform&&item.h5toapp" href="wzdsecurity://home_activity">
            <button class="button-view">智慧涠洲APP</button>
          </a>
          <a v-if="item.weburl">
            <button class="button-view" @click="openWebView(item.weburl)">打开链接</button>
          </a>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <!-- =============微信小程序平台逻辑处理============= -->
          <!-- 需要先通过APP打开小程序-这里的逻辑待完善 -->
          <!-- https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html -->
          <button class="button-view" launchApp="" v-if="item.minitoapp1">打开APP</button>
          <button class="button-view" @click="miniToMini(item.miniId)"
                  v-if="item.miniId&&item.miniId!='gh_8ec2c6a70dac'">打开小程序
          </button>
          <!-- #endif -->
        </view>
        <!-- 微信浏览器环境下-对跳转APP的提示 -->
        <view v-if="isWechatPlatform&&item.h5toapp" class="hor-layout-center" style="margin-top: 5px;">
          <view class="hint-view">使用手机浏览器可打开App</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import {
  webView
} from '@/router.js'

export default {
  data() {
    return {
      webView,
      onling: true,
      hideMyHint: true,
      aboutList: [],
      // 微信分享
      sweixin: {},
      miniIds: [{
        name: "个人工具箱2020",
        id: 'gh_8ec2c6a70dac'
      }, {
        name: "个人超级工具箱",
        id: 'gh_437f0ec3f3c3'
      }],
      paltform: getApp() && getApp().globalData && getApp().globalData.paltform,
    }
  },
  computed: {
    isWechatPlatform() {
      if (this.$wechat)
        return this.$wechat.isWechat()
      return false
    }
  },
  onLoad() {
    const onling = uni.getStorageSync('onling')
    console.log("onling========", onling)
    this.onling = onling
    this.hideMyHint = this.getMyHintShow()
    this.getAboutData()
    this.configAppService()
    this.configMiniProgramH5()
  },
  methods: {
    getMyHintShow() {
      let paltform = this.paltform
      return paltform != "支付宝小程序" && paltform != "字节跳动小程序"
    },
    handleErrorFn() {
    },
    handleLaunchFn() {
    },
    // 小程序跳转另一个小程序
    miniToMini(appId) {
      uni.navigateToMiniProgram({
        appId: "wx096c7438aaf94ca0",
        success(res) {
          console.log(res)
        },
        fail(err) {
          console.error(err)
        }
      })
    },
    // h5打开微信小程序
    configMiniProgramH5() {
      // #ifdef H5
      if (this.$wechat && this.$wechat.isWechat()) {
        this.$wechat.miniprogram((res) => {
          document.addEventListener('WeixinOpenTagsError', function (e) {
            console.error("WeixinOpenTagsError",e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
          });
          console.log(res)
        })
      }
      // #endif
    },
    // app打开微信小程序
    openMiniProgram(miniId = 'gh_437f0ec3f3c3') {
      //#ifdef APP-PLUS
      console.log("sweixin===================" + JSON.stringify(this.sweixin))
      if (this.sweixin) {
        this.sweixin.launchMiniProgram({
          id: miniId
        })
      } else {
        plus.nativeUI.alert('当前环境不支持微信操作!');
      }
      //#endif
    },
    // app配置分享功能
    configAppService() {
      // #ifdef APP-PLUS
      console.log("plus");
      plus.share.getServices((success) => {
        console.log("success==================" + JSON.stringify(success))
        var sweixin = {}
        success.forEach(res => {
          console.log("success-forEach==================" + JSON.stringify(res))
          if (res.id === 'weixin')
            sweixin = res
        })
        console.log("success-sweixin==================" + JSON.stringify(sweixin))
        this.sweixin = sweixin
      }, (error) => {
        console.log("获取分享服务列表失败：" + error.message);
      });
      //#endif
    },
    // app打开网页
    openWebView(weburl) {
      uni.navigateTo({
        url: webView + `?url=${weburl}`
      })
    },
    getAboutData() {
      let whereCon = {
        flag: 'aboutme'
      }
      uniCloud.callFunction({
        name: 'database',
        data: {
          collection: 'content',
          whereCon
        },
        success: (res) => {
          console.log(res)
          let result = res.result.data
          if (result && result.length > 0) {
            this.aboutList = result[0].content
          }
        },
      })
    }
  }
}
</script>

<style scoped>
page {
  background: #e6e6e6;
}

.container {
  width: 100%;
  padding-bottom: 20px;
  background: #e6e6e6;
}

.about-item {
  background: white;
  margin: 0px 30 rpx;
  margin-bottom: 40 rpx;
  border-radius: 5px;
  padding: 15 rpx 20 rpx;
}

.about-item_title {
  font-size: medium;
  font-weight: bold;
}

.about-item_text {
  font-size: small;
}

.button-view {
  font-size: 12px;
  padding: 5px 10px;
  line-height: 1rem;
  background: #00BDFF;
  color: white;
  margin-left: 10px;
}

.hint-view {
  font-size: x-small;
  background: #bcbcbc;
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  margin-right: 5px;
}
</style>
